<!--男生的榜单-->
<template>
  <el-row>
    <el-col :span="8">
      <div class="grid-content bg-purple">
        <el-collapse accordion>
          <h2>畅销榜</h2>
          <el-collapse-item v-for="(n,index) in 10" :key="index">
            <template slot="title">
              开局躺平,截胡5星老婆
            </template>
            <div class="kg">
              <img src="https://img-tailor.11222.cn/bcv/big/202205141832503498_s.jpg" class="image">
              <span class="yc">凌天大陆，九境分明。 袁尊本是尊灵境之主，突破之际，却被自己挚爱的女人勾结外人所杀。 一朝梦醒，发现自己重生在了一个天生无脉的少年身上。 天堂无路，地狱无门，且看他如何逆袭绝境，再临巅峰！</span>
            </div>
            {{n}}
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-col>

    <el-col :span="8">
      <div class="grid-content bg-purple-light">
        <el-collapse accordion>
          <h2>新书榜</h2>
          <el-collapse-item v-for="(n,index) in 10" :key="index">
            <template slot="title">
              开局躺平,截胡5星老婆
              <i class="header-icon el-icon-info"></i>
            </template>
            <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
            <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
            {{n}}
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-col>

    <el-col :span="8">
      <div class="grid-content bg-purple">
        <el-collapse accordion>
          <h2>完结榜</h2>
          <el-collapse-item v-for="(n,index) in 10" :key="index">
            <template slot="title">
              开局躺平,截胡5星老婆
              <i class="header-icon el-icon-info"></i>
            </template>
            <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
            <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
            {{n}}
          </el-collapse-item>
        </el-collapse>
      </div>
    </el-col>
  </el-row>
</template>
<script>
export default {
  name: "TheBoyList",
  data() {
    return {
      activeName: '1'
    };
  }
}
</script>

<style scoped>
.image {
  width: 114px;
  height: 152px;
  display: block;
  transition-duration: 0.5s;
  float: left;
}
.image:hover{
  box-shadow: 340px 5px 5px #f1e8e8;
}
.kg{
  width: 340px;
  height: 100px;
}

.yc{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  font-size: 14px;
}
</style>
